<template>
  <div>
    <button @click="handleAdd">添加数据</button>
    <button @click="handleGet">获取数据</button>
    <button @click="handleUpdate">更新数据</button>
    <button @click="handleDelete">删除数据</button>
    <button @click="handleGetAll">获取所有数据</button>
  </div>
</template>

<script setup>
import useIndexedDB from '@/utils/useIndexedDB';

const { openDB, addData, getData, updateData, deleteData, getAllData } = useIndexedDB();

const handleAdd = async () => {
  await openDB('myDB', 'myObjectStore');
  const result = await addData('myObjectStore', { id: 2, name: 'Kimi', age: 30 });
  console.log('添加结果:', result);
  alert('添加结果:', JSON.stringify(result));
};

const handleGet = async () => {
  await openDB('myDB', 'myObjectStore');
  const result = await getData('myObjectStore', 1);
  console.log('获取结果:', result);
  alert(JSON.stringify(result))
};

const handleUpdate = async () => {
  await openDB('myDB', 'myObjectStore');
  const result = await updateData('myObjectStore', 1, { age: 31 });
  console.log('更新结果:', result);
  alert(JSON.stringify(result));
};

const handleDelete = async () => {
  await openDB('myDB', 'myObjectStore');
  const result = await deleteData('myObjectStore', 1);
  console.log('删除结果:', result);
  alert(JSON.stringify(result));
};

const handleGetAll = async () => {
  await openDB('myDB', 'myObjectStore');
  const result = await getAllData('myObjectStore');
  console.log('获取所有数据结果:', result);
  alert(JSON.stringify(result));
};


</script>